<template>
    <view>
        <u-navbar
            title="lrl-tree-picker"
            :autoBack="true"
            border
            placeholder
        >
        </u-navbar>
        <view class="container">
            <u--text size="28rpx" type="primary"
                text="更多配置项查看组件源码注释"></u--text>
            <view class="form-item">
                <text class="form-item--title">children数据格式选择</text>
                <view class="form-item--content">
                    <!-- nvue 点击事件bug https://ask.dcloud.net.cn/question/145087 -->
                    <!-- <input v-model="getValue1" class="input" placeholder="请选择" disabled ></input> -->
                    <text class="input" @click="open('user1')">
                        {{ getValue1 || '请选择' }}
                    </text>
                </view>
            </view>
            <view class="form-item">
                <text class="form-item--title">array数据格式选择</text>
                <view class="form-item--content " >
                    <!-- <input v-model="getValue2" class="input" placeholder="请选择" disabled></input> -->
                    <text class="input" @click="open('user2')">
                        {{ getValue2 || '请选择' }}
                    </text>
                    <view class=" flex-row margin-top-sm" style="display: flex;">
                        <u--text size="24rpx" type="info" wordWrap="break-word" style="height: 80rpx;width: max-content;" lines="4"
                            text="多用于动态网络请求子集数据"></u--text>
                        <u-tag text="重置数据" @click="user2 = [];arrayData = []"></u-tag>
                    </view>
                    <view class="flex-row margin-top-sm flex">
						<u--text size="24rpx" type="info" wordWrap="break-word" style="height: 80rpx;" lines="4"
						    text="数据数量"></u--text>
                        <u-number-box v-model="arrayLength"></u-number-box>
                    </view>
                </view>
            </view>
            <view class="form-item">
                <text class="form-item--title">加载图标-loading-mode</text>
                <view class="form-item--content ">
                    <u--text size="24rpx" type="info" wordWrap="break-word"
                        text="点击重置数据查看效果"></u--text>
                    <u-radio-group
                        v-model="loadingModeValue"
						
                        style="margin-top: 15rpx;"
                        placement="column"
                      >
                        <u-radio
                          v-for="(item, index) in loadingModeList"
                          :key="index"
						  labelSize="24rpx"
                          :customStyle="{marginBottom: '8px'}"
                          :label="item.label + '-' + item.name"
                          :name="item.name"
                        >
                        </u-radio>
                    </u-radio-group>
                </view>
            </view>
            <view class="form-item">
                <text class="form-item--title">选择器高度(rpx)-height</text>
                <view class="form-item--content flex-row">
                    <u-number-box v-model="height" :step="100"></u-number-box>
                    
                    <u-switch v-model="isFullScreen"></u-switch>
                    <u--text text="满屏" type="primary"></u--text>
                </view>
            </view>
            <view class="form-item">
                <text class="form-item--title">选择事件处理方式-tap-handler-mode</text>
                <view class="form-item--content flex-row">
                    <u--text text="防抖处理-debounce" type="primary"></u--text>
                    <u-switch v-model="eventType"></u-switch>
                    <u--text text="节流处理-throttle" type="primary"></u--text>
                </view>
            </view>
            <view class="form-item">
                <text class="form-item--title">事件处理时间(ms)-tap-handler-time</text>
                <view class="form-item--content">
                    <input v-model="eventTime" class="input" type="number"></input>
                </view>
            </view>
            <view class="form-item">
                <text class="form-item--title">swiper模式-option-mode</text>
                <view class="form-item--content ">
                    <view>
                        <u-switch v-model="isOptionMode"></u-switch>
                        <u--text size="24rpx" type="info" wordWrap="break-word" style="width: 700rpx;height: 80rpx;" lines="4"
                            text="选择数据量过大出现swiper滑动卡顿时可以使用 single 单一列表模式"></u--text>
                    </view>
                </view>
            </view>
            <view class="form-item">
                <text class="form-item--title">用户一选择数据</text>
                <view class="form-item--content">
                    <view class="code-show"><text class="code-show-text">{{ user1 }}</text> </view>
                </view>
            </view>
            <view class="form-item">
                <text class="form-item--title">用户二选择数据</text>
                <view class="form-item--content">
                    <view class="code-show"><text class="code-show-text">{{ user2 }}</text> </view>
                </view>
            </view>
            <view class="form-item">
                <text class="form-item--title">children 数据格式</text>
                <view class="form-item--content">
                    <view class="code-show">
                        <text class="code-show-text">
                            // children 数据格式
                            localdata: {{ localdata }}
                        </text>
                    </view>
                </view>
            </view>
            <view class="form-item">
                <text class="form-item--title">array 数据格式</text>
                <view class="form-item--content">
                    <view class="code-show">
                        <text class="code-show-text">
                            // array 数据格式
                            arrayData: {{ arrayData }}
                        </text>
                    </view>
                </view>
            </view>
        </view>

       <lrl-tree-picker 
            ref="lrlTreePicker"
            key="Picker1"
            title="children-选择街道" 
            :height="isFullScreen ? 'fullScreen' : height"
            :option-mode="optionMode"
            :tap-handler-mode="eventTypeMode"
            :tap-handler-time="eventTime"
            :localdata="localdata" 
            @change="change"
            @confirm="confirm"
        ></lrl-tree-picker>
        <lrl-tree-picker
            ref="lrlTreePickerarray"
            key="Picker2"
            mode="array"
            title="array-模拟网络请求选择" 
            :height="isFullScreen ? 'fullScreen' : height"
            :option-mode="optionMode"
            :tap-handler-mode="eventTypeMode"
            :tap-handler-time="eventTime"
            :loading="arrayLoding"
            :loadingMode="loadingModeValue"
            :localdata="arrayData"
            @change="arrayChange"
            @confirm="arrayConfirm"
        > 
        
            <!-- #ifndef MP -->
            <template v-slot:loading v-if="!loadingModeValue">
                <text >加载中...</text>
            </template>
            <!-- #endif -->

        </lrl-tree-picker>  
    </view>
</template>

<script>
    // easycom 模式导入的组件有些时候不弹组件属性代码提示，单独导入
    import lrlTreePicker from '@/components/lrl/components/lrl-tree-picker/lrl-tree-picker.vue';
    /**
     * TreePicker气泡菜单示例demo
     * @author liruilin
     */
    export default {
        components: {
            lrlTreePicker
        },
        data() {
            return {
                type: '',
                height: 1300,
                eventType: false,
                isOptionMode: true,
                eventTime: 100,
                user1: [],
                user2: [],
				arrayLength: 10,
                isFullScreen: false,
                loadingModeValue: 'spinner',
                loadingModeList: [
                    {label: '花朵形', name: 'spinner'},
                    {label: '圆形', name: 'circle'},
                    {label: '半圆形', name: 'semicircle'},
                    {label: '不显示', name: 'none'},
                    {label: '自定义(小程序demo暂时演示不了，实际可以使用)', name: ''},
                ],
                localdata: [
                    {
                        text: '锦江区', 
                        value: '锦江区', 
                        children: [
                            {
                                text: '街道1', 
                                value: '街道1', 
                                children: [
                                    {
                                        text: '小区1', 
                                        value: '小区1',
                                        children: [
                                            {text: '一楼', value: '一楼'},
                                            {text: '二楼', value: '二楼'},
                                            {text: '三楼', value: '三楼'},
                                            {text: '四楼', value: '四楼'},
                                            {text: '五楼', value: '五楼'},
                                            {text: '六楼', value: '六楼'},
                                            {text: '七楼', value: '七楼'},
                                            {text: '八楼', value: '八楼'},
                                            {text: '九楼', value: '九楼'},
                                            {text: '十楼', value: '十楼'},
                                            {text: '十一楼', value: '十一楼'},
                                            {text: '十二楼', value: '十二楼'},
                                            {text: '十三楼', value: '十三楼'},
                                        ]
                                    },
                                ]
                            },
                            {
                                text: '街道2', 
                                value: '街道2', 
                                children: [
                                    
                                ]
                            }
                        ]
                    },
                    {
                        text: '高新区', 
                        value: '高新区', 
                        children: [
                            {
                                text: '街道1', 
                                value: '街道1', 
                                children: [
                                    {text: '小区1',  value: '小区1'},
                                    {text: '小区2', value: '小区2'},
                                    {text: '小区3', value: '小区3'},
                                    {text: '小区4', value: '小区4'}
                                ]
                            },
                            {
                                text: '街道2', 
                                value: '街道2', 
                                children: [
                                    {text: '小区1',  value: '小区1'},
                                    {text: '小区2', value: '小区2'},
                                    {text: '小区3', value: '小区3'},
                                    {text: '小区4', value: '小区4'}
                                ]
                            }
                        ]
                    }
                ],
                arrayLoding: false,
                arrayData: []
            }
        },
        computed: {
            getValue1: {
                get(){
                    return this.user1.map(e => e.text).join('/');
                },
                set(e){
                    return e
                }
            },
            getValue2: {
                get(){
                    return this.user2.map(e => e.text).join('/');
                },
                set(e){
                    return e
                }
            },
            eventTypeMode(){
                return this.eventType ? 'throttle' : 'debounce'
            },
            optionMode(){
                return this.isOptionMode ? 'swiper' : 'single'
            }
        },
        methods: {
            open(type){
                if(type == 'user1'){
                    this.$refs['lrlTreePicker'].setActive(this.user1);
                    this.$refs['lrlTreePicker'].open(type);
                }else {
                    if(!this.arrayData.length) this.arrayChange({})
                    this.$refs['lrlTreePickerarray'].setActive(this.user2);
                    this.$refs['lrlTreePickerarray'].open(type);
                }
                
            },
            confirm(e){
                this.type = e.custom;
                this[this.type] = e.value;
            },
            change({custom, value }){
                // console.log(value)
            },
            /**
             * 模拟网络加载请求下一级数据，未做同级重复请求处理，请自行通过value 在业务上判断处理即可
             */
            arrayChange({custom, value }){
                if(this.arrayData.length < 4){
                    this.arrayLoding = true
                    setTimeout(function(_this){
                        let level = _this.arrayData.length + 1

                        _this.arrayData.push(
                            (new Array(_this.arrayLength)).fill({}).map(
                                (e, i) => { 
                                    return {text: '层级-' + level + '-' + i, value: '层级-' + level + '-' + i} 
                                } 
                            ) 
                        )
                        _this.arrayLoding = false
                    }, 500, this )
                }
            },
            arrayConfirm(e){
                this.type = e.custom;
                this[this.type] = e.value;
            }
        }
    }
</script>

<style lang="scss">
    /* #ifndef APP-NVUE */
    page{
        background-color: #fff;
    }
    /* #endif */
    
    .container{
        padding: 20rpx;
    }
    .form-item{
        margin-top: 30rpx;
        &--title{
            font-size: 26rpx;
            font-weight: 600;
            color: #333;
        }
        &--content{
            margin-top: 20rpx;
            // flex-direction: row;
        }
        
    }
    .input{
		display: block;
        border: 1px solid #f5f5f5;
        flex: 1;
        border-radius: 10rpx;
        height: 80rpx;
        line-height: 80rpx;
        padding: 0 10rpx;
        font-size: 30rpx;
        color: #333;
    }
    .code-show{
        flex: 1;
        background-color: #282c35;
        white-space: pre;
        padding: 20rpx;
        margin-top: 25rpx;
    }
    .code-show-text{
        color: #fff;
        font-size: 18rpx;
    }
    .flex-row{
        flex-direction: row;
    }
</style>
